// 填加单位后缀
u(n)
  n == 0 ? n : unit(n, px);

// font color
$font-colors = {
    '0': #000,
    '3': #333,
    '4': #444,
    '5': #555,
    '6': #666,
    '7': #777,
    '8': #888,
    '9': #999,
    'a': #aaa,
    'b': #bbb,
    'c': #ccc,
    'd': #ddd,
    'e': #eee,
    'f': #fff,
    '065': rgba(0, 0, 0, 0.65),
    '07': rgba(0, 0, 0, 0.7),
    '085': rgba(0, 0, 0, 0.85),
    '025': rgba(0, 0, 0, 0.25),
    '078f': #0078ff,
}

for $key, $value in $font-colors
  .fc{$key}
    color $value

// font size
for $n in 0 12 14 16 18 20 22 24 26 28 30 50
  .fs{$n}
    font-size u($n)

// all padding
for $n in 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30
  .p{$n}
    padding u($n)

// special padding
for $n in 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30
  .pt{$n}
    padding-top u($n)
  .pr{$n}
    padding-right u($n)
  .pb{$n}
    padding-bottom u($n)
  .pl{$n}
    padding-left u($n)

// all margin
for $n in 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 32
  .m{$n}
    margin u($n)

// special margin
for $n in 0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30 32 36 40 48
  .mt{$n}
    margin-top u($n)
  .mr{$n}
    margin-right u($n)
  .mb{$n}
    margin-bottom u($n)
  .ml{$n}
    margin-left u($n)

// all font-weight
for $n in 100 200 300 400 500 600 700 800
  .fw{$n}
    font-weight $n

.bold
  font-weight bold
// 定位
.pr
  position relative
.pa
  position absolute

.fac
  text-align center
.fal
  text-align left
.far
  text-align right

.hide
  display none

.r4
  border-radius 4px

.fl
  float left
.fr
  float right

.omit
  overflow hidden
  text-overflow ellipsis
  word-break break-all
  white-space pre-wrap
  display -webkit-box
  -webkit-line-clamp 1
  -webkit-box-orient vertical

for $n in 1 2 3 4 5
  .omit{$n}
    overflow hidden
    text-overflow ellipsis
    word-break break-all
    white-space pre-wrap
    display -webkit-box
    -webkit-line-clamp $n
    -webkit-box-orient vertical
    
.hand
  cursor pointer

.fn-clear:after
  visibility hidden
  display block
  font-size 0
  height 0

.gray-box
  background-color #fafafa
  border 1px solid #d9d9d9

.gray-box-deep
  background-color #f5f5f5
  border 1px solid #d9d9d9

.gray-bd
  border 1px solid #e8e8e8

.gray-bd-deep
  border 1px solid #d9d9d9

.mla
  margin-left auto
.mra
  margin-right auto

.gray
  background-color #f7f7f7

.white
  background-color #fff

.white-box
  background-color #fff
  border 1px solid #d9d9d9

.white-box-bottom
  border-bottom 1px solid #d9d9d9

.cpointer
  cursor pointer

.cdisabled
  cursor not-allowed

.wba
  word-break break-all

.scroll
  overflow scroll

.fvc
  vertical-align middle

.w100
  width 100%

// font color
$badge = {
  'success': #52C41A,
  'processing': #0078ff,
  'error': #F5222D,
  'warning': #ffbf00,
  'default': rgba(0,0,0,.5), 
}

for $key, $value in $badge
  .bg-{$key}
    background-color $value

// 对应 antd 的 badge
for $key, $value in $badge
  .badge-{$key}
    position relative
    display flex 
    align-items center
    &:before
      transform translateY(10%)
      content ''
      display inline-block
      width 6px
      height 6px
      border-radius 50%
      margin-right 5px
      background-color $value

.h100
  height 100%

.gray-bg
  padding 8px 16px
  border-radius 2px
  background-color #EEEEEE

for $n in 1 2 3 4
  .bl{$n}
    border-left u($n) solid #0078FF
  .bb{$n}
    border-bottom u($n) solid #0078FF
  .bt{$n}
    border-top u($n) solid #0078FF
  .br{$n}
    border-right u($n) solid #0078FF

for $n in 12 14 16 18 20 22 24 26 28 30
  .lh{$n}
    line-height u($n)

.title-label-fc
  color rgba(0, 0, 0, .65)

.title-value-fc
  color rgba(0, 0, 0, .85)

// 备注：树组件复写的样式中的一个icon需要以前的iconfont文件，而最近版的antd 3.10.4中icon已经用svg实现，没有iconfont文件了
@font-face {
  font-family: anticon;
  src: url("https://cdn.dtwave.com/platform/font/font_zck90zmlh7hf47vi.eot");
  src: url("https://cdn.dtwave.com/platform/font/font_zck90zmlh7hf47vi.eot?#iefix") format("embedded-opentype"), url("https://cdn.dtwave.com/platform/font/font_zck90zmlh7hf47vi.woff") format("woff"), url("https://cdn.dtwave.com/platform/font/font_zck90zmlh7hf47vi.ttf") format("truetype"), url("https://cdn.dtwave.com/platform/font/font_zck90zmlh7hf47vi.svg#iconfont") format("svg")
}

pre
  overflow unset

.no-wrap
  white-space nowrap 

.wrap-word
  white-space pre-wrap 

.full-preveiw-modal
  height calc(100vh - 156px)
  
.preview-modal-icon:hover
  color #000

.maxW90
  max-width 90%

.ofy-auto
  overflow-y auto

.ofx-auto
  overflow-x auto
  
.ofy-hidden
  overflow-y hidden

.ofx-hidden
  overflow-x hidden

.bg-f 
  background-color #fff

.input-error
  &.ant-input 
    border-color #f5222d

    &:hover
    &:focus
      border-color #f5222d!important

    &:focus 
      box-shadow 0 0 0 2px rgba(245,34,45,0.2)!important
  
